<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="600">
    <el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="95px">
      <el-form-item label="教学楼名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入教学楼名称" />
      </el-form-item>
      <el-form-item label="楼层数">
        <el-input-number v-model="formData.layers" :min="1" :max="9999" />
      </el-form-item>

      <!-- 经度、纬度和按钮布局 -->
      <el-form-item label="位置" required>
        <el-row :gutter="10" style="align-items: center;">
          <el-col :span="8">
<!--            <el-input v-model="formData.lng" placeholder="请输入经度"/>-->
            <el-form-item prop="lng">
              <el-input v-model="formData.lng" placeholder="请输入经度"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
<!--            <el-input v-model="formData.lat" placeholder="请输入纬度"/>-->
            <el-form-item prop="lat">
              <el-input v-model="formData.lat" placeholder="请输入纬度"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="openMap">打开地图</el-button>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="备注">
        <el-input v-model="formData.remark" placeholder="请输入内容" type="textarea" :rows="3" />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import {CommonStatusEnum} from '@/utils/constants'
import {useBuildingApi} from "@/api/yxt/building";
import {useMessage} from "@/components/Notice";
defineOptions({name: 'YxtBuildingForm'})

const {t} = useI18n()
const buildingApi = useBuildingApi();
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formLoading = ref(false)
const formType = ref('')
const formData = ref({
  id: undefined,
  name: '',
  layers: 0,
  location: [],
  lng: '',
  lat: '',
  remark: '',
  createTime: '',
  status: CommonStatusEnum.ENABLE
})
const formRules = reactive({
  name: [{required: true, message: '教学楼名称不能为空', trigger: ['blur', 'change']}],
  lng: [{required: true, message: '位置经度不能为空', trigger: ['blur', 'change']}],
  lat: [{required: true, message: '位置纬度不能为空', trigger: ['blur', 'change']}],
})
const formRef = ref()

const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  if (id) {
    formLoading.value = true
    try {
      formData.value = await buildingApi.getObj(id)
      formData.value.lng = formData.value.location[0];
      formData.value.lat = formData.value.location[1];
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({open})

const emit = defineEmits(['success'])
const submitForm = () => {
  formRef.value?.validate(async (valid: any) => {
    if (valid) {
      formLoading.value = true
      try {
        const data = formData.value
        // 将经纬度存储到 location 数组中
        formData.value.location = [formData.value.lng, formData.value.lat];

        console.log('提交的数据：', formData.value);
        if (formType.value === 'create') {
          await buildingApi.createObj(data);
          useMessage(t('common.createSuccess'));
        } else {
          await buildingApi.updateObj(data);
          useMessage(t('common.updateSuccess'));
        }
        dialogVisible.value = false
        emit('success')
      } finally {
        formLoading.value = false
      }
    }
  });
}

const resetForm = () => {
  formData.value = {
    id: undefined,
    name: '',
    layers: 0,
    location: [],
    remark: '',
    createTime: '',
    status: CommonStatusEnum.ENABLE
  }
  formRef.value?.resetFields()
}

// 地图打开函数
const openMap = () => {
  window.open("https://lbs.amap.com/tools/picker/", "_blank");
};
</script>

